<template>
	<div class="page__bd">
		<div class="weui-search-bar" :class="isSearching?'weui-search-bar_focusing':''">
			<form class="weui-search-bar__form" action="javascript:void 0">
				<div class="weui-search-bar__box">
					<i class="weui-icon-search"></i>
					<input type="search" ref="input" class="weui-search-bar__input" placeholder="搜索" v-model="searchValue" @input="searchFn">
					<a href="javascript:" class="weui-icon-clear" @click="clearFn"></a>
				</div>
				<label class="weui-search-bar__label" style="transform-origin: 0px 0px; opacity: 1; transform: scale(1, 1);" @click="focusFn">
					<i class="weui-icon-search"></i>
					<span>搜索</span>
				</label>
			</form>
			<a href="javascript:" class="weui-search-bar__cancel-btn" @click="cancleFn">取消</a>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isSearching: false,
				searchValue: '',
			}
		},
		methods: {
			focusFn() {//显示搜索框
				this.isSearching = true;
				this.$refs.input.focus()
			},
			cancleFn() {//取消
				this.isSearching = false;
				this.searchValue = '';
				this.$emit('on-cancle');
			},
			searchFn() {//搜索
				this.$emit('on-change', this.searchValue);
			},
			clearFn() {//清空
				this.searchValue = '';
				this.$emit('on-clear');
			}
		},
		mounted() {
			this.searchValue = this.value;
		}
	}
</script>

<style>
</style>
